<template>
    <section class="List-container wrapper">

        <el-row>
            <el-col :span="4" class="box tree">
                <channel-tree @clickNode="clickNode" ref="treeComponent"></channel-tree>
            </el-col>
            <el-col :span="20" class="box list">
                <div class="filter-wrapper">

                    <el-form ref="filterForm" :model="listQuery" :inline="true">

                        <el-form-item prop="title" size="medium" class="margin-top-10">
                            <el-input v-model="listQuery.title" placeholder="标题"></el-input>
                        </el-form-item>

                        <el-button type="primary" size="medium" icon="el-icon-search" @click="handleFilter">搜索</el-button>
                        <el-button type="primary" size="medium" icon="el-icon-mars-reset" @click="handleResetFilter">重置</el-button>
                        <el-button :disabled="createBto" type="primary" size="medium" icon="el-icon-plus" @click="handleCreate">添加内容</el-button>
                    </el-form>
                </div>

                <el-table
                        :data="list"
                        border fit
                        highlight-current-row
                        v-loading="listLoading"
                        element-loading-text="给我一点时间"
                        @selection-change="handleSelectionChange"
                        class="margin-bottom-10">

                    <el-table-column
                            type="selection"
                            width="55" align="center">
                    </el-table-column>
                    <el-table-column type="index" width="55" align="center"></el-table-column>

                    <el-table-column label="内容标题" align="left">
                        <template slot-scope="scope"> {{scope.row.contentExt.title}} </template>
                    </el-table-column>

                    <el-table-column label="状态" width="120px" align="center">
                        <template slot-scope="scope">
                            <el-tag type="success" v-if="scope.row.status === 0">草稿</el-tag>
                            <el-tag type="success" v-if="scope.row.status === 1">审核中</el-tag>
                            <el-tag type="success" v-if="scope.row.status === 2">审核通过</el-tag>
                            <el-tag type="success" v-if="scope.row.status === 3">回收站</el-tag>
                            <el-tag type="success" v-if="scope.row.status === 4">投稿</el-tag>
                            <el-tag type="success" v-if="scope.row.status === 5">归档</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column label="创建时间" width="150px" align="center">
                        <template slot-scope="scope"> {{scope.row.ctime | parseTime('{y}-{m}-{d} {h}:{i}')}} </template>
                    </el-table-column>

                    <el-table-column label="最后修改时间" width="150px" align="center">
                        <template slot-scope="scope"> {{scope.row.utime | parseTime('{y}-{m}-{d} {h}:{i}')}} </template>
                    </el-table-column>

                    <el-table-column label="操作" width="180px" align="center">
                        <template slot-scope="scope">
                            <el-button size="small" type="primary" icon="edit" @click="handleUpdate(scope.row)">编辑</el-button>

                            <el-button size="small" type="danger" icon="delete" @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div v-show="!listLoading" class="pagination-container margin-bottom-10">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="listQuery.page"
                            :page-sizes="[10, 20, 30, 50]"
                            :page-size="listQuery.rows"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>

            </el-col>
        </el-row>

    </section>
</template>

<script>
    import { created, updated, deleted, deletedBatch, selectOne, selectList, selectListContentWrapper } from '@/api/cms/content'
    import ChannelTree from "@/views/cms/channel/ChannelTree";

    export default {
        components: {ChannelTree},
        name: 'ContentList',
        data() {
            return {
                list: [],
                total: null,
                listLoading: false,
                multipleSelection: [],
                listQuery: {
                    siteId: null,
                    channelId: null,
                    title: null
                },
                createBto: true
            }
        },
        created() {
            this.getTableData()
        },
        methods: {
            handleCreate() {
                this.$router.push({path: 'form', query: {'siteId': this.listQuery.siteId, 'channelId': this.listQuery.channelId}})
            },
            handleUpdate(row) {
                this.$router.push({path: 'form', query: {'channelId': row.channelId, 'contentId': row.id}})
            },
            clickNode(node) {//子组件调用父组件方法
                if(node.childNodes.length === 0) {
                    this.listQuery.siteId = node.data.siteId
                    this.listQuery.channelId = node.data.id
                    this.getTableData()
                    if(this.listQuery.channelId) {
                        this.createBto = false
                    }
                }
            },
            handleFilter() {//条件过滤
                this.listQuery.page = 1
                this.getTableData()
            },
            handleResetFilter() {//重置过滤条件
                this.listQuery.siteId = null
                this.listQuery.channelId = null
                this.$refs.filterForm.resetFields()
                this.getTableData()
            },
            handleSelectionChange(val) {//多选
                this.multipleSelection = val;
            },
            handleSizeChange(val) {
                this.listQuery.rows = val
                this.getTableData()
            },
            handleCurrentChange(val) {
                this.listQuery.page = val
                this.getTableData()
            },
            getTableData() {
                this.listLoading = true
                selectListContentWrapper(this.listQuery).then(response => {
                    this.list = response.data.list
                    this.listLoading = false
                }).catch(error => {
                    console.log(error)
                    this.listLoading = false
                })
            },
            handleDelete(row) {//删除数据
                this.$confirm('确定要删除？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleted(row.id).then(response => {
                        if(response.data.status) {
                            this.$notify({
                                title: '成功', message: response.data.message,
                                type: 'success', duration: 2000
                            })
                            this.getTableData()
                            this.$refs.treeComponent.handleReload()
                        } else {
                            this.$notify({
                                title: '发生错误', message: response.data.message,
                                type: 'error', duration: 2000
                            })
                        }
                    })
                }).catch(() => {
                    this.$message({ type: 'warning', message: '已取消删除' })
                })
            },
            handleBatchDelete() {//批量删除数据
                this.$confirm('确定要删除？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    if(this.multipleSelection.length > 0) {
                        let ids = []
                        for(let item of this.multipleSelection) {
                            ids.push(item.id)
                        }
                        deletedBatch({ids: ids.join(',')}).then(response => {
                            if(response.data.status) {
                                this.$notify({
                                    title: '成功', message: response.data.message,
                                    type: 'success', duration: 2000
                                })
                                this.getTableData()
                            } else {
                                this.$notify({
                                    title: '发生错误', message: response.data.message,
                                    type: 'error', duration: 2000
                                })
                            }
                        })

                    } else {
                        this.$notify({
                            title: '提示', message: '请选择需要删除的记录',
                            type: 'warning', duration: 2000
                        })
                    }
                }).catch(() => {
                    this.$message({ type: 'info', message: '已取消删除' })
                })
            }
        }
    }
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>
    .wrapper{
        border: 1px solid #e9eaec;
        background: #fff;
        border-radius: 4px;
        font-size: 14px;
        position: relative;
        transition: all .2s ease-in-out;
        .box{
            &:last-child{
                border-left: 1px solid #d4dde2;
            }
        }
        .tree{

        }
        .list{
            padding: 0 10px;
            .filter-wrapper{
                line-height: 50px;
                .el-button{
                    margin-top: 10px;
                }
            }
        }
    }

</style>